<template>
  <div class="ai-diagnosis">
    <van-nav-bar
        title="AI智能诊断"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
    >
      <template #right>
        <van-icon name="clock-o" @click="showHistory = true"/>
      </template>
    </van-nav-bar>

    <div class="diagnosis-container">
      <!-- 诊断步骤指示器 -->
      <van-steps :active="currentStep" direction="horizontal">
        <van-step>问题描述</van-step>
        <van-step>详细信息</van-step>
        <van-step>诊断结果</van-step>
      </van-steps>

      <!-- 步骤1: 问题描述 -->
      <div v-if="currentStep === 0" class="step-content">
        <div class="step-header">
          <h3>请描述您遇到的法律问题</h3>
          <p>AI将根据您的描述进行初步分析</p>
        </div>

        <van-field
            v-model="form.description"
            type="textarea"
            placeholder="请详细描述您遇到的问题，包括时间、地点、人物、事件经过等..."
            rows="6"
            maxlength="1000"
            show-word-limit
            required
        />

        <div class="quick-options">
          <h4>常见问题类型</h4>
          <div class="option-tags">
            <van-tag
                v-for="option in quickOptions"
                :key="option"
                :type="form.selectedOptions.includes(option) ? 'primary' : 'default'"
                @click="toggleOption(option)"
            >
              {{ option }}
            </van-tag>
          </div>
        </div>

        <div class="step-actions">
          <van-button
              type="primary"
              size="large"
              :disabled="!form.description.trim()"
              @click="nextStep"
          >
            下一步
          </van-button>
        </div>
      </div>

      <!-- 步骤2: 详细信息 -->
      <div v-if="currentStep === 1" class="step-content">
        <div class="step-header">
          <h3>补充详细信息</h3>
          <p>请提供更多细节以获得更准确的诊断</p>
        </div>

        <van-field
            v-model="scenarioText"
            label="诊断场景"
            placeholder="请选择诊断场景"
            readonly
            is-link
            @click="showScenarioPicker = true"
        />

        <van-field
            v-model="form.involvedAmount"
            label="涉及金额"
            placeholder="如有涉及金额，请填写"
            type="number"
        />

        <van-field
            v-model="form.location"
            label="发生地点"
            placeholder="请输入问题发生的地点"
        />

        <van-field
            v-model="form.evidences"
            label="现有证据"
            type="textarea"
            placeholder="请描述您现在掌握的证据材料"
            rows="3"
        />

        <div class="step-actions">
          <van-button size="large" @click="prevStep">上一步</van-button>
          <van-button type="primary" size="large" @click="startDiagnosis">
            开始诊断
          </van-button>
        </div>
      </div>

      <!-- 步骤3: 诊断结果 -->
      <div v-if="currentStep === 2" class="step-content">
        <div v-if="diagnosisLoading" class="diagnosis-loading">
          <van-loading size="24px" vertical>AI正在分析中...</van-loading>
          <div class="loading-tips">
            <p v-for="(tip, index) in loadingTips" :key="index" :class="{ active: currentTipIndex === index }">
              {{ tip }}
            </p>
          </div>
        </div>

        <div v-else-if="diagnosisResult" class="diagnosis-result">
          <div class="result-header">
            <van-icon name="passed" color="#07c160"/>
            <h3>诊断完成</h3>
          </div>

          <!-- 问题分析 -->
          <div class="result-section">
            <h4>问题分析</h4>
            <div class="analysis-content">
              <p><strong>问题类型：</strong>{{ diagnosisResult.problemType }}</p>
              <p><strong>法律性质：</strong>{{ diagnosisResult.legalNature }}</p>
              <p><strong>争议焦点：</strong>{{ diagnosisResult.disputeFocus }}</p>
            </div>
          </div>

          <!-- 关键影响因素 -->
          <div class="result-section" v-if="diagnosisResult.keyFactors && diagnosisResult.keyFactors.length">
            <h4>关键影响因素分析</h4>
            <div class="factors-list">
              <div
                  v-for="factor in diagnosisResult.keyFactors"
                  :key="factor.name"
                  class="factor-item"
              >
                <div class="factor-header">
                  <div class="factor-name">{{ factor.name }}</div>
                  <div class="factor-status" :class="{ 'has-it': factor.hasIt, 'no-it': !factor.hasIt }">
                    <van-icon :name="factor.hasIt ? 'success' : 'warning-o'"/>
                    {{ factor.hasIt ? '具备' : '缺失' }}
                  </div>
                </div>
                <div class="factor-description">{{ factor.description }}</div>
                <div class="factor-importance">
                  <span>重要程度：</span>
                  <van-rate v-model="factor.importance" readonly size="14px"/>
                </div>
                <div class="factor-suggestion" v-if="factor.suggestion">
                  <van-icon name="bulb-o"/>
                  <span>{{ factor.suggestion }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 法律依据 -->
          <div class="result-section" v-if="diagnosisResult.legalAnalysis && diagnosisResult.legalAnalysis.length">
            <h4>相关法律依据</h4>
            <div class="legal-analysis">
              <div
                  v-for="analysis in diagnosisResult.legalAnalysis"
                  :key="analysis.lawName"
                  class="law-item"
              >
                <div class="law-title">{{ analysis.lawName }}</div>
                <div class="law-content">{{ analysis.content }}</div>
                <div class="law-explanation" v-if="analysis.explanation && analysis.explanation !== analysis.content">
                  <div class="explanation-label">通俗解读：</div>
                  <div class="explanation-content">{{ analysis.explanation }}</div>
                </div>
                <div class="applicable-scenario" v-if="analysis.applicableScenario">
                  <van-tag type="primary" size="mini">{{ analysis.applicableScenario }}</van-tag>
                </div>
              </div>
            </div>
          </div>

          <!-- 建议方案 -->
          <div class="result-section" v-if="diagnosisResult.suggestedSteps && diagnosisResult.suggestedSteps.length">
            <h4>解决方案建议</h4>
            <div class="suggested-steps">
              <div
                  v-for="step in diagnosisResult.suggestedSteps"
                  :key="step.stepNumber"
                  class="step-item"
                  :class="{ 'required-step': step.required }"
              >
                <div class="step-header">
                  <div class="step-number">步骤{{ step.stepNumber }}</div>
                  <div class="step-name">{{ step.stepName }}</div>
                  <div class="step-required" v-if="step.required">
                    <van-tag type="danger" size="mini">必需</van-tag>
                  </div>
                </div>
                <div class="step-description">{{ step.description }}</div>
                <div class="step-meta">
                  <div class="step-time">
                    <van-icon name="clock-o"/>
                    <span>预计时间：{{ step.estimatedTime }}</span>
                  </div>
                  <div class="step-impact">
                    <van-icon name="arrow-up"/>
                    <span>{{ step.successImpact }}</span>
                  </div>
                </div>
                <div class="step-action" v-if="step.actionEntry">
                  <van-button type="primary" size="small" @click="handleStepAction(step)">
                    立即执行
                  </van-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 成功率预估 -->
          <div class="result-section">
            <h4>维权成功率预估</h4>
            <div class="success-rate">
              <van-circle
                  v-model:current-rate="diagnosisResult.successRate"
                  :rate="diagnosisResult.successRate"
                  :speed="100"
                  :text="diagnosisResult.successRate + '%'"
                  stroke-width="60"
                  color="#07c160"
              />
              <p class="rate-desc">{{ getRateDescription(diagnosisResult.successRate) }}</p>
            </div>
          </div>

          <!-- 风险提示 -->
          <div class="result-section" v-if="diagnosisResult.riskWarnings && diagnosisResult.riskWarnings.length">
            <h4>风险提示</h4>
            <div class="risk-warnings">
              <div
                  v-for="(warning, index) in diagnosisResult.riskWarnings"
                  :key="index"
                  class="risk-item"
              >
                <van-notice-bar
                    left-icon="warning-o"
                    :text="warning"
                    color="#ff6b35"
                    background="#fff7f0"
                />
              </div>
            </div>
          </div>

          <!-- 时间和经济成本预估 -->
          <div class="result-section">
            <h4>时间和经济成本预估</h4>
            <div class="cost-estimate">
              <div class="cost-item">
                <div class="cost-type">
                  <van-icon name="clock-o"/>
                  <span>时间成本</span>
                </div>
                <div class="cost-content">{{ diagnosisResult.estimatedTime }}</div>
              </div>
              <div class="cost-item">
                <div class="cost-type">
                  <van-icon name="gold-coin-o"/>
                  <span>经济成本</span>
                </div>
                <div class="cost-content">{{ diagnosisResult.estimatedCost }}</div>
              </div>
            </div>
          </div>

          <!-- 推荐模板 -->
          <div class="result-section"
               v-if="diagnosisResult.recommendedTemplates && diagnosisResult.recommendedTemplates.length">
            <h4>推荐文书模板</h4>
            <div class="template-list">
              <div
                  v-for="template in diagnosisResult.recommendedTemplates"
                  :key="template.id"
                  class="template-item"
                  @click="goToTemplate(template.id)"
              >
                <van-icon name="description"/>
                <div class="template-info">
                  <div class="template-name">{{ template.name }}</div>
                  <div class="template-desc">{{ template.description }}</div>
                </div>
                <van-icon name="arrow"/>
              </div>
            </div>
          </div>

          <div class="result-actions">
            <van-button size="large" @click="saveDiagnosis">保存诊断</van-button>
            <van-button type="primary" size="large" @click="startNewDiagnosis">
              重新诊断
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 日期选择器 -->
    <van-popup v-model:show="showDatePicker" position="bottom">
      <van-date-picker
          v-model="currentDate"
          @confirm="onDateConfirm"
          @cancel="showDatePicker = false"
      />
    </van-popup>

    <!-- 诊断场景选择器 -->
    <van-popup v-model:show="showScenarioPicker" position="bottom">
      <van-picker
          :columns="scenarioOptions"
          @confirm="onScenarioConfirm"
          @cancel="showScenarioPicker = false"
      />
    </van-popup>

    <!-- 紧急程度选择器 -->
    <van-popup v-model:show="showUrgencyPicker" position="bottom">
      <van-picker
          :columns="urgencyOptions"
          @confirm="onUrgencyConfirm"
          @cancel="showUrgencyPicker = false"
      />
    </van-popup>

    <!-- 历史记录 -->
    <van-popup v-model:show="showHistory" position="right" style="width: 80%">
      <div class="history-container">
        <van-nav-bar title="诊断历史" @click-left="showHistory = false">
          <template #left>
            <van-icon name="cross"/>
          </template>
        </van-nav-bar>

        <div class="history-list">
          <div
              v-for="item in historyList"
              :key="item.id"
              class="history-item"
              @click="loadHistoryItem(item)"
          >
            <div class="history-header">
              <div class="history-title">{{ item.problemType }}</div>
              <div class="history-time">{{ formatTime(item.createTime) }}</div>
            </div>
            <div class="history-desc">{{ item.description }}</div>
            <div class="history-rate">成功率: {{ item.successRate }}%</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {aiDiagnosis, getDiagnosisHistory} from '@/api/ai'
import {showToast} from 'vant'

export default {
  name: 'AiDiagnosis',
  data() {
    return {
      currentStep: 0,
      form: {
        description: '',
        selectedOptions: [],
        scenario: 1, // 添加诊断场景字段，默认为1-职场纠纷
        involvedAmount: '',
        occurTime: '',
        location: '',
        evidences: '',
        urgency: ''
      },
      scenarioOptions: [
        {text: '职场纠纷', value: 1},
        {text: '消费维权', value: 2},
        {text: '租房矛盾', value: 3},
        {text: '其他', value: 4}
      ],
      showScenarioPicker: false,
      quickOptions: [
        '劳动纠纷', '合同纠纷', '工伤赔偿', '拖欠工资',
        '违法解除', '经济补偿', '社保问题', '加班费'
      ],
      urgencyOptions: [
        {text: '一般', value: '一般'},
        {text: '紧急', value: '紧急'},
        {text: '非常紧急', value: '非常紧急'}
      ],
      showDatePicker: false,
      showUrgencyPicker: false,
      showHistory: false,
      currentDate: new Date(),
      diagnosisLoading: false,
      diagnosisResult: null,
      loadingTips: [
        '正在分析问题类型...',
        '查找相关法律条文...',
        '评估案件胜率...',
        '生成解决方案...',
        '推荐相关模板...',
        'AI深度分析中，请耐心等待...'
      ],
      currentTipIndex: 0,
      historyList: []
    }
  },
  computed: {
    scenarioText() {
      const scenario = this.scenarioOptions.find(item => item.value === this.form.scenario)
      return scenario ? scenario.text : '请选择诊断场景'
    }
  },
  created() {
    this.loadHistory()
  },
  methods: {
    toggleOption(option) {
      const index = this.form.selectedOptions.indexOf(option)
      if (index > -1) {
        this.form.selectedOptions.splice(index, 1)
      } else {
        this.form.selectedOptions.push(option)
      }
    },
    nextStep() {
      if (this.currentStep < 2) {
        this.currentStep++
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    onDateConfirm(value) {
      try {
        // 修复日期选择器的事件处理
        if (value && Array.isArray(value.selectedValues) && value.selectedValues.length >= 3) {
          const year = value.selectedValues[0]
          const month = value.selectedValues[1]
          const day = value.selectedValues[2]
          this.form.occurTime = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
        } else if (value instanceof Date) {
          this.form.occurTime = value.toLocaleDateString()
        } else if (this.currentDate) {
          this.form.occurTime = this.currentDate.toLocaleDateString()
        }
      } catch (error) {
        console.error('日期选择器错误:', error)
        this.form.occurTime = new Date().toLocaleDateString()
      }
      this.showDatePicker = false
    },
    onScenarioConfirm(value) {
      // 处理诊断场景选择器的确认事件
      if (value && value.selectedOptions && value.selectedOptions.length > 0) {
        this.form.scenario = value.selectedOptions[0].value
      } else if (value && value.selectedValues && value.selectedValues.length > 0) {
        this.form.scenario = value.selectedValues[0]
      } else if (typeof value === 'number') {
        this.form.scenario = value
      }
      this.showScenarioPicker = false
    },
    onUrgencyConfirm(value) {
      // 处理紧急程度选择器的确认事件
      if (value && value.selectedOptions && value.selectedOptions.length > 0) {
        this.form.urgency = value.selectedOptions[0].text || value.selectedOptions[0].value
      } else if (value && value.selectedValues && value.selectedValues.length > 0) {
        this.form.urgency = value.selectedValues[0]
      } else if (typeof value === 'string') {
        this.form.urgency = value
      }
      this.showUrgencyPicker = false
    },
    async startDiagnosis() {
      this.currentStep = 2
      this.diagnosisLoading = true
      this.currentTipIndex = 0

      // 显示AI分析提示
      showToast({
        message: 'AI正在深度分析中，预计需要1-2分钟，请耐心等待...',
        duration: 3000,
        position: 'top'
      })

      // 模拟加载过程
      const tipInterval = setInterval(() => {
        this.currentTipIndex++
        if (this.currentTipIndex >= this.loadingTips.length) {
          clearInterval(tipInterval)
        }
      }, 1000)

      try {
        // 构建结构化输入数据
        const inputData = {
          selectedOptions: this.form.selectedOptions,
          involvedAmount: this.form.involvedAmount ? parseFloat(this.form.involvedAmount) : null,
          occurTime: this.form.occurTime,
          location: this.form.location,
          evidences: this.form.evidences,
          urgency: this.form.urgency
        }

        const response = await aiDiagnosis({
          scenario: this.form.scenario, // 整数类型的诊断场景
          problemDescription: this.form.description, // 问题描述
          inputData: inputData, // 结构化输入数据
          needDetailedAnalysis: true, // 需要详细分析
          needTemplateRecommendation: true, // 需要推荐模板
          needCaseRecommendation: true // 需要推荐案例
        })

        setTimeout(() => {
          this.diagnosisLoading = false
          // 解析AI返回的结果并转换为前端需要的格式
          this.diagnosisResult = this.parseAiResponse(response.data)
        }, 5000)

      } catch (error) {
        this.diagnosisLoading = false
        showToast({
          message: '诊断失败，请重试',
          type: 'fail'
        })
      }
    },
    async loadHistory() {
      try {
        const response = await getDiagnosisHistory()
        this.historyList = response.data || []
      } catch (error) {
        console.error('加载历史记录失败:', error)
      }
    },
    loadHistoryItem(item) {
      this.diagnosisResult = item
      this.currentStep = 2
      this.showHistory = false
    },
    formatTime(time) {
      return new Date(time).toLocaleString()
    },
    getRateDescription(rate) {
      if (rate >= 80) return '胜率很高，建议积极维权'
      if (rate >= 60) return '胜率较高，可以尝试维权'
      if (rate >= 40) return '胜率一般，需要充分准备'
      return '胜率较低，建议谨慎考虑'
    },
    goToTemplate(id) {
      this.$router.push(`/templates/detail/${id}`)
    },
    saveDiagnosis() {
      showToast({
        message: '诊断结果已保存',
        type: 'success'
      })
      this.loadHistory()
    },
    parseAiResponse(responseData) {
      try {
        // 直接使用后端返回的结构化数据
        const aiResult = responseData

        return {
          id: aiResult.id,
          problemType: aiResult.scenarioName || this.getScenarioText(this.form.scenario),
          legalNature: this.getLegalNature(aiResult.scenario),
          disputeFocus: this.getDisputeFocus(aiResult.scenario),
          successRate: aiResult.successRate || 50,
          successLevel: aiResult.successLevel,
          keyFactors: aiResult.keyFactors || [],
          suggestedSteps: aiResult.suggestedSteps || [],
          legalAnalysis: aiResult.legalAnalysis || [],
          riskWarnings: aiResult.riskWarnings || [],
          estimatedTime: aiResult.estimatedTime || '时间待评估',
          estimatedCost: aiResult.estimatedCost || '费用待评估',
          recommendedTemplates: aiResult.recommendedTemplates || [],
          recommendedCases: aiResult.recommendedCases || [],
          createTime: aiResult.createTime
        }
      } catch (error) {
        console.error('解析AI响应失败:', error)
        // 返回默认结果
        return {
          problemType: this.getScenarioText(this.form.scenario),
          legalNature: '法律纠纷',
          disputeFocus: '争议焦点分析中',
          successRate: 50,
          keyFactors: [],
          suggestedSteps: [],
          legalAnalysis: [],
          riskWarnings: [],
          estimatedTime: '时间待评估',
          estimatedCost: '费用待评估',
          recommendedTemplates: []
        }
      }
    },

    parseSuggestions(suggestionsText) {
      if (!suggestionsText) return ['请联系专业律师进行详细咨询']

      // 按数字序号分割建议
      const suggestions = suggestionsText.split(/\d+\./).filter(s => s.trim())
      return suggestions.map(s => s.trim()).filter(s => s.length > 0)
    },

    getScenarioText(scenario) {
      const scenarioMap = {
        1: '职场纠纷',
        2: '消费维权',
        3: '租房矛盾',
        4: '其他纠纷'
      }
      return scenarioMap[scenario] || '法律纠纷'
    },

    getLegalNature(scenario) {
      const natureMap = {
        1: '劳动争议纠纷',
        2: '消费者权益纠纷',
        3: '房屋租赁纠纷',
        4: '民事纠纷'
      }
      return natureMap[scenario] || '民事纠纷'
    },

    getDisputeFocus(scenario) {
      const focusMap = {
        1: '工资支付与劳动关系',
        2: '商品质量与服务标准',
        3: '租赁合同履行',
        4: '权益保护'
      }
      return focusMap[scenario] || '权益保护'
    },

    startNewDiagnosis() {
      this.currentStep = 0
      this.form = {
        description: '',
        selectedOptions: [],
        scenario: 1, // 重置时也要包含scenario字段
        involvedAmount: '',
        occurTime: '',
        location: '',
        evidences: '',
        urgency: ''
      }
      this.diagnosisResult = null
    },

    handleStepAction(step) {
      // 处理步骤操作，可以跳转到相关页面或执行相关操作
      showToast({
        message: `正在为您准备${step.stepName}相关资料...`,
        type: 'loading'
      })

      // 这里可以根据不同的步骤类型进行不同的处理
      // 比如跳转到模板页面、联系律师等
    }
  }
}
</script>

<style scoped>
.ai-diagnosis {
  background: #f5f5f5;
  min-height: 100vh;
}

.diagnosis-container {
  padding: 15px;
}

.van-steps {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.step-content {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
}

.step-header {
  text-align: center;
  margin-bottom: 20px;
}

.step-header h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.step-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.quick-options {
  margin: 20px 0;
}

.quick-options h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
}

.option-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.option-tags .van-tag {
  cursor: pointer;
}

.step-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.step-actions .van-button {
  flex: 1;
}

.diagnosis-loading {
  text-align: center;
  padding: 40px 20px;
}

.loading-tips {
  margin-top: 30px;
}

.loading-tips p {
  margin: 10px 0;
  color: #999;
  font-size: 14px;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.loading-tips p.active {
  opacity: 1;
  color: #1989fa;
}

.diagnosis-result {
  padding: 20px 0;
}

.result-header {
  text-align: center;
  margin-bottom: 30px;
}

.result-header .van-icon {
  font-size: 48px;
  margin-bottom: 10px;
}

.result-header h3 {
  margin: 0;
  font-size: 20px;
}

.result-section {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.result-section:last-child {
  border-bottom: none;
}

.result-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.analysis-content p {
  margin: 8px 0;
  line-height: 1.6;
}

.legal-basis .law-item {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
}

.law-title {
  font-weight: bold;
  margin-bottom: 8px;
  color: #1989fa;
}

.law-content {
  color: #666;
  line-height: 1.5;
}

.suggestions .suggestion-item {
  display: flex;
  margin-bottom: 15px;
}

.suggestion-step {
  background: #1989fa;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-right: 15px;
  flex-shrink: 0;
}

.suggestion-content {
  flex: 1;
  line-height: 1.6;
}

.success-rate {
  text-align: center;
}

.success-rate .van-circle {
  margin-bottom: 15px;
}

.rate-desc {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.template-list .template-item {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
}

.template-item .van-icon:first-child {
  color: #1989fa;
  font-size: 20px;
  margin-right: 15px;
}

.template-info {
  flex: 1;
}

.template-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.template-desc {
  color: #666;
  font-size: 12px;
}

.result-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.result-actions .van-button {
  flex: 1;
}

.history-container {
  height: 100vh;
  background: white;
}

.history-list {
  padding: 15px;
}

.history-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  cursor: pointer;
}

.history-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.history-title {
  font-weight: bold;
}

.history-time {
  font-size: 12px;
  color: #999;
}

.history-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.history-rate {
  font-size: 12px;
  color: #1989fa;
}

.factors-content {
  background: #f8f9fa;
  border-radius: 6px;
  padding: 15px;
  line-height: 1.6;
  color: #666;
}

.risk-warning {
  margin: 10px 0;
}


.factors-list .factor-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  border-left: 4px solid #1989fa;
}

.factor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.factor-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
}

.factor-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}

.factor-status.has-it {
  background: #f0f9ff;
  color: #1989fa;
}

.factor-status.no-it {
  background: #fff7f0;
  color: #ff6b35;
}

.factor-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

.factor-importance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.factor-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  padding: 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
}

.factor-suggestion .van-icon {
  color: #ffa940;
  margin-top: 2px;
}

.legal-analysis .law-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.law-explanation {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.explanation-label {
  font-weight: bold;
  color: #1989fa;
  margin-bottom: 5px;
  font-size: 14px;
}

.explanation-content {
  color: #666;
  line-height: 1.6;
}

.applicable-scenario {
  margin-top: 10px;
}

.suggested-steps .step-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  position: relative;
}

.step-item.required-step {
  border-left: 4px solid #ff6b35;
}

.step-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.step-number {
  background: #1989fa;
  color: white;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.step-name {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  flex: 1;
}

.step-required {
  margin-left: auto;
}

.step-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;
}

.step-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.step-time,
.step-impact {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #999;
}

.step-time .van-icon {
  color: #1989fa;
}

.step-impact .van-icon {
  color: #52c41a;
}

.step-action {
  text-align: right;
}

.risk-warnings .risk-item {
  margin-bottom: 10px;
}

.cost-estimate {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
}

.cost-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.cost-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.cost-type {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #333;
  min-width: 100px;
}

.cost-type .van-icon {
  color: #1989fa;
}

.cost-content {
  flex: 1;
  color: #666;
  line-height: 1.6;
  text-align: right;
}

.cost-estimate {
  background: #f0f9ff;
  border-radius: 6px;
  padding: 15px;
  line-height: 1.6;
  color: #666;
  border-left: 4px solid #1989fa;
}
</style>
